<template>
	<div class="container-fluid">
		<div class="row">
				<div class="col-lg-12">
					<div class="solve" id="slove">
						<h2 class='product'>解决方案</h2>
						<p>面对行业客户，提供安全、易扩展的解决方案为客户实现高效信息化管理，满足客户业务快速发展需求</p>
						<div class="row">
							<div class="col-md-1" >
							
						</div>
						<div class="col-md-10">
							<ul class="solveimgbox">
								<li>
									<img class="sloveimg" src="images/lvyou_hui.png"/>
									<p class="sovecont">旅游行业</p>
								</li>
								<li>
									<img class="sloveimg" src="images/yiliao_hui.png"/>
									<p class="sovecont">医疗行业</p>
								</li>
								<li class="slove">
									<img class="sloveimg" src="images/dainshang_lan.png"    />
									<p class="sovecont">移动电商</p>
								</li>
								<li>
									<img class="sloveimg" src="images/shenghuofuwu_hui.png"/>
									<p class="sovecont cont1">生活服务</p>
								</li>
								<li>
									<img class="sloveimg" src="images/jinrong_hui.png"/>
									<p class="sovecont cont1">金融行业</p>
								</li>
							</ul>
						</div>
						<div class="col-md-1">

						</div>
						</div>
					</div>

				</div>
			</div>
	</div>
	
</template>

<script>
</script>

<style>
	/*解决*/
.solve{
	width: 100%;
	text-align: center;
}
.solveimgbox{
	display: flex;
	flex-direction: row;
	margin-top: 4rem;
	margin-bottom: 2rem;
	justify-content: center;
	align-content:space-between
}

.clickleftbox,.clickrightbox{
	width: 15%;
	height: 40rem;

}
.solveimgbox div{
	width: 100%;
}
.clickleftbox .clickleft{
	margin: 30% auto;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background:#e6e3e3;

}
.clickleft img{
	width: 2rem;
	height: 2.6rem;
	margin-top: 1rem;
	margin-left: -0.2rem;
	
}
.clickrightbox .clickright{
	margin:30% auto;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background:#e6e3e3;
}
.slove{
	box-shadow: 0px 5px 15px #e2e0e0;
}

.clickright img{
	width: 2rem;
	height: 2.6rem;
	margin-top: 1rem;
	margin-left: 0.2rem !important;
}
.solveimgbox div .slove1{
	width: 73%;
	height: 18rem;
	background: #FBFBFB;
	margin-left: 12%;
}
.solveimgbox div .slove3{
	width: 73%;
	height: 18rem;
	background: #FBFBFB;
	margin-left: 12%;
}
.solveimgbox div .slove2{
	width: 90%;
	height: 25rem;
	background: #FBFBFB;
	margin-left: 7.5%;
	
}
.sloveimg{
	margin-top: 3rem;
}
.solveimgbox .sovecont{
	line-height: 7rem;
}
	.solveimgbox{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.solveimgbox li{
		list-style: none;
		display: block;
		width: 16%;
		color: #000000;
	}
	.big{
		color: #337AB7;
	}

</style>
<script type="text/javascript">
	export default {
	mounted() {　
		
		var slovebox = document.getElementsByClassName('solveimgbox');
		var sloveimg = document.getElementsByTagName('li');
		var imgs =['images/lvyou_lan.png','images/yiliao_lan.png','images/dainshang_lan.png','images/shenghuofuwu_lan.png','images/jinrong_lan.png']
		var img = ['images/lvyou_hui.png','images/yiliao_hui.png','images/dianshanghui.png','images/shenghuofuwu_hui.png','images/jinrong_hui.png']

	 if(null != sloveimg){
			for(let i =0;i<sloveimg.length;i++){
				sloveimg[i].onmouseover = function(){
					for(var j=0;j<sloveimg.length;j++){
						
						sloveimg[j].children[0].src=img[j];
						 sloveimg[j].children[1].style.color="#333" ;
						 sloveimg[j].classList.remove('slove')
						}
						this.children[1].style.color="#5963F3";
						this.children[0].src=imgs[i];
						this.classList.add('slove')
			  	}
			}
		}
　}
}
</script>

